<template>
  <div>
    <div class="absolute w23 top-pos">
      <div class="left_top relative m1-size m1-pos">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />基本情况
        </div>

        <div class="text-item">
          <i class="el-icon-baseball white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ baseInfo.area }}&nbsp;&nbsp;亩
            </div>
            <div class="white t1-tile">种植面积</div>
          </div>
        </div>
        <div class="text-item">
          <i class="el-icon-user white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ baseInfo.num }}&nbsp;&nbsp;户
            </div>
            <div class="white t1-tile">农户数量</div>
          </div>
        </div>
        <div class="text-item">
          <i class="el-icon-bank-card white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ baseInfo.typeNum }}&nbsp;&nbsp;种
            </div>
            <div class="white t1-tile">作物种类</div>
          </div>
        </div>
        <div class="text-item">
          <i class="el-icon-postcard white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ baseInfo.sale }}&nbsp;&nbsp;元
            </div>
            <div class="white t1-tile">作物销量</div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute w23 t2-pos">
      <div class="left_top relative m1-size m1-pos">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />商户信息
        </div>
        <div class="text-item">
          <i class="el-icon-shopping-bag-2 white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ merchantInfo.num }}&nbsp;&nbsp;个
            </div>
            <div class="white t1-tile">商户数量</div>
          </div>
        </div>

        <div class="text-item">
          <i class="el-icon-news white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ merchantInfo.typeNum }}&nbsp;&nbsp;种
            </div>
            <div class="white t1-tile">经营种类</div>
          </div>
        </div>
        <div class="text-item">
          <i class="el-icon-postcard white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ merchantInfo.sale }}&nbsp;&nbsp;万
            </div>
            <div class="white t1-tile">销售额</div>
          </div>
        </div>
        <div class="text-item">
          <i class="el-icon-crop white f30 inline icon"></i>
          <div class="inline text-indent">
            <div class="font-num m2" style="color: rgb(36, 253, 163)">
              {{ merchantInfo.taxAmount }}&nbsp;&nbsp;万
            </div>
            <div class="white t1-tile">纳税额</div>
          </div>
        </div>
      </div>
    </div>

    <!--经营种类柱形图-->
    <div class="absolute w23 t3-pos">
      <div class="left_top relative m3-size m1-pos">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />经营种类柱形图
        </div>
        <div ref="jytype" style="width: 100%; height: 85%"></div>
      </div>
    </div>
    <!--产区地图-->
    <div class="absolute map-pos">
      <div class="center_top relative map-size">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon3.png" />商户地图
        </div>
        <div id="center_map" style="height: 496px">
          <ul>
            <span class="open qianlan">开</span>
            <li class="tiao">
              <span class="open_btn"></span>
              <span class="off_btn"></span>
            </li>
            <span class="off qianlan">关</span>
          </ul>
        </div>
      </div>
    </div>
    <!--词云-->
    <div class="absolute w23 t4-pos">
      <div class="left_top relative m1-pos m5-size" style="overflow: hidden">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title"><img src="@/assets/img/page1/icon4.png" />词云</div>
        <div ref="word" style="width: 98%; height: 98%"></div>
      </div>
    </div>
    <!--视频-->
    <div class="absolute w23 t6-pos">
      <div class="left_top relative m1-pos m6-size" style="overflow: hidden">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />产业视频
        </div>
        <video
          src="https://h2-shanghai-blog.oss-cn-shanghai.aliyuncs.com/srsb/ffa854c43fd54a388dee83047a6f5ab5.webm"
          controls=""
          autoplay=""
          style="margin-top: -30px; width: 100%; height: 100%"
        ></video>
      </div>
    </div>
    <!--产业新闻-->
    <div class="absolute w23 t7-pos">
      <div class="left_top relative m1-pos m7-size" style="overflow: hidden;">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />产业信息
        </div>
        <div v-for="(item, index) in article">
          <h1 style="color: #ff5722">{{ item.newsTitle }}</h1>
          <div class="white" style="font-size: 16px; line-height: 35px">
            <span>时间:{{ item.createTime }}</span
            >&nbsp;&nbsp;<span>作者:{{ item.author }}</span>
            <div>{{ item.briefIntroduction }}</div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "echarts-wordcloud";
import AMapLoader from "@amap/amap-jsapi-loader";
import {
  getBaseInfo,
  getMerchantInfo,
  getMerchantOperation,
  getKanbanCropList,
  getNews,
} from "@/api/villageindustry";
import * as echarts from "echarts";
export default {
  mounted() {
    this.getBaseInfo();
    this.getMerchantInfo();
    this.getMerchantOperation();
    this.getWordCloud();
    this.initMap();
    this.getNews();
  },
  data() {
    return {
      article: [],
      map: {},
      merchantInfo: {
        num: 0,
        typeNum: 0,
        sale: 0,
        taxAmount: 0,
      },
      baseInfo: {
        area: 0,
        num: 0,
        typeNum: 0,
        sale: 0,
      },
      baseData: [],
      wordOperation: {
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud", //词云图
            gridSize: 10, //词的间距
            sizeRange: [5, 44], //词云大小范围
            textStyle: {
              color: function () {
                //词云的颜色随机
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250),
                  ].join(",") +
                  ")"
                );
              },
              normal: {},
              emphasis: {
                shadowBlur: 50, //阴影的模糊等级
                shadowColor: "#333", //鼠标悬停在词云上的阴影颜色
              },
            },
            data: [
              {
                name: " 新鲜水果",
                value: 32,
              },
              {
                name: " 美味",
                value: 30,
              },
              {
                name: " 健康",
                value: 30,
              },
              {
                name: " 维生素",
                value: 28,
              },
              {
                name: " 西瓜",
                value: 26,
              },
              {
                name: " 樱桃",
                value: 24,
              },
              {
                name: " 桃子",
                value: 24,
              },
              {
                name: " 甜瓜",
                value: 22,
              },
              {
                name: " 香蕉",
                value: 22,
              },
              {
                name: " 苹果",
                value: 22,
              },
              {
                name: " 梨子",
                value: 22,
              },
              {
                name: " 荔枝",
                value: 20,
              },
              {
                name: " 葡萄",
                value: 20,
              },
              {
                name: " 杨梅",
                value: 20,
              },
            ],
          },
        ],
      },
      merchantOperation: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["五金", "企业", "医疗", "娱乐", "服务", "服装", "百货"],
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      },
    };
  },
  methods: {
    getNews() {
      let num = 3;
      let that = this;
      getNews(num)
        .then((res) => {
          that.article = res.data;
        })
        .catch((err) => {});
    },
    //初始化地图
    initMap() {
      let that = this;
      window._AMapSecurityConfig = {
        serviceHost: "http://map.zhuyaowei.cn:888/_AMapService",
      };
      AMapLoader.load({
        key: "d52af739d3742f69fdc924320b294780", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          that.map = new AMap.Map("center_map", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center: [120.710948, 31.783655], // 初始化地图中心点位置
            mapStyle: "amap://styles/bca1f666a4491ac9834b6c8d6b19ca4f",
          });
          AMap.plugin("AMap.ToolBar", function () {
            //异步加载插件
            var toolbar = new AMap.ToolBar();
            that.map.addControl(toolbar);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 获取词云
    getWordCloud: function () {
      let that = this;
      getKanbanCropList()
        .then((res) => {
          console.log("res->", res);
          that.wordOperation.series[0].data = res.data;
          this.$nextTick(() => {
            var chartDom = that.$refs.word;

            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom).setOption(that.wordOperation);
          });
        })
        .catch((err) => {});
    },
    getMerchantOperation: function () {
      getMerchantOperation()
        .then((res) => {
          let that = this;
          this.$nextTick(() => {
            that.merchantOperation.xAxis.data = [];
            that.merchantOperation.series[0].data = [];
            // 对数据进行赋值
            for (let item in res.data) {
              that.merchantOperation.xAxis.data.push(res.data[item].name);
              that.merchantOperation.series[0].data.push(res.data[item].value);
            }
            var chartDom = that.$refs.jytype;
            console.log(that.merchantOperation);

            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom, "dark").setOption(that.merchantOperation);
          });
        })
        .catch((err) => {});
    },
    getMerchantInfo: function () {
      getMerchantInfo()
        .then((res) => {
          this.merchantInfo.num = res.data.num;
          this.merchantInfo.typeNum = res.data.typeNum;
          this.merchantInfo.sale = res.data.sale;
          this.merchantInfo.taxAmount = res.data.taxAmount;
        })
        .catch((err) => {});
    },
    getBaseInfo: function () {
      getBaseInfo()
        .then((res) => {
          this.baseInfo.area = res.data.area;
          this.baseInfo.num = res.data.num;
          this.baseInfo.typeNum = res.data.typeNum;
          this.baseInfo.sale = res.data.sale;
        })
        .catch((err) => {});
    },
    loadData: function () {
      var that = this;
      api.loadMapData(function (res) {
        if (!res || res.status != 200) {
          utils.showerror("数据加载失败！");
          return;
        }
        that.initMapChart(res);
      });

      this.emvorromntchart = this.initemvorromntchart();
      this.cropoption = this.initcropoption();
    },
  },
};
</script>

<style scoped>
@import "../../css/index.css";
.absolute {
  position: absolute;
}
.w23 {
  width: 23%;
}
.top-pos {
  left: 49px;
  top: 90px;
}
.t2-pos {
  left: 49px;
  top: 380px;
}
.white {
  color: white;
}
.f30 {
  font-size: 30px;
}
.inline {
  display: inline-block;
}
.font-num {
  font-size: 26px;
}
.text-item {
  margin-left: 20px;
  display: inline-block;
  width: 40%;
}
.text-indent {
  text-indent: 1.4rem;
  font-size: 20px;
}
.t1-tile {
  margin-bottom: 30px;
}
.icon {
  font-size: 40px;
}
.m1-size {
  height: 250px;
  width: 450px;
}
.m2 {
  margin-bottom: 10px;
}
.t3-pos {
  left: 49px;
  top: 670px;
}
.m3-size {
  height: 406px;
  width: 450px;
}
.map-size {
  width: 900px;
  height: 542px;
}
.map-pos {
  left: 542px;
  top: 93px;
}
.t4-pos {
  left: 542px;
  top: 678px;
}
.m5-size {
  height: 400px;
  width: 900px;
}
.t6-pos {
  left: 1480px;
  top: 90px;
}
.m6-size {
  height: 400px;
  width: 430px;
}
.t7-pos {
  left: 1480px;
  top: 526px;
}
.m7-size {
  height: 552px;
  width: 430px;
}
</style>